<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于多视点超分辨率重建算法模块1</title>
    <link rel="stylesheet" href="../styles/model.css">
    <!-- 先加载核心库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <!-- 再加载语言支持 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>
    <!-- 最后加载样式 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header class="module-header">
            <h1>超分重建算法模块</h1>
            <div class="info">
                <div class="user-info">
                    <div class="user-icon"></div>
                    <span class="username">当前用户：{{ username }}</span>
                </div>
                <div class="date-info">{{ currentDate }}</div>
            </div>
        </header>

        <!-- 功能切换导航 -->
        <nav class="function-nav">
            <button v-for="(tab, index) in tabs" :key="index" @click="switchTab(tab.id)"
                :class="{ active: activeTab === tab.id }">
                {{ tab.title }}
            </button>
            <div class="stats-container">
                <div class="stat-item">
                    <div class="stat-icon" style="background-color: #409EFF;">
                        <svg t="1738721375513" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4313" width="40" height="40">
                            <path
                                d="M247.466667 42.666667h529.066666c17.066667 0 34.133333 17.066667 34.133334 34.133333s-17.066667 34.133333-34.133334 34.133333H247.466667c-17.066667 0-34.133333-17.066667-34.133334-34.133333s17.066667-34.133333 34.133334-34.133333zM162.133333 170.666667h699.733334c17.066667 0 34.133333 17.066667 34.133333 34.133333s-17.066667 34.133333-34.133333 34.133333H162.133333c-17.066667 0-34.133333-17.066667-34.133333-34.133333s17.066667-34.133333 34.133333-34.133333zM128 366.933333c-8.533333 0-17.066667 8.533333-17.066667 17.066667v512c0 8.533333 8.533333 17.066667 17.066667 17.066667h768c8.533333 0 17.066667-8.533333 17.066667-17.066667V384c0-8.533333-8.533333-17.066667-17.066667-17.066667H128zM128 298.666667h768c46.933333 0 85.333333 38.4 85.333333 85.333333v512c0 46.933333-38.4 85.333333-85.333333 85.333333H128c-46.933333 0-85.333333-38.4-85.333333-85.333333V384c0-46.933333 38.4-85.333333 85.333333-85.333333z"
                                p-id="4314"></path>
                            <path
                                d="M213.333333 426.666667h597.333334c25.6 0 42.666667 17.066667 42.666666 42.666666v341.333334c0 25.6-17.066667 42.666667-42.666666 42.666666H213.333333c-25.6 0-42.666667-17.066667-42.666666-42.666666v-341.333334c0-25.6 17.066667-42.666667 42.666666-42.666666z m238.933334 320l-102.4-110.933334 102.4-98.133333c12.8-12.8 12.8-34.133333 0-46.933333-12.8-12.8-34.133333-12.8-46.933334 0l-123.733333 115.2c-17.066667 17.066667-17.066667 42.666667 0 59.733333l123.733333 128c12.8 12.8 34.133333 12.8 46.933334 0 12.8-12.8 12.8-34.133333 0-46.933333z m123.733333 0c-12.8 12.8-12.8 34.133333 0 46.933333 12.8 12.8 34.133333 12.8 46.933333 0l123.733334-128c17.066667-17.066667 17.066667-42.666667 0-59.733333l-123.733334-115.2c-12.8-12.8-34.133333-12.8-46.933333 0-12.8 12.8-12.8 34.133333 0 46.933333l102.4 98.133333-102.4 110.933334z"
                                p-id="4315"></path>
                        </svg>
                    </div>
                    <div class="stat-text">
                        <div class="stat-title">累计调用</div>
                        <div class="stat-value">{{stats.calls}}次</div>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon" style="background-color: #FFC107;">
                        <svg t="1738721666938" class="icon" viewBox="0 0 1536 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5450" width="40" height="40">
                            <path
                                d="M768 0C345.6 0 0 384 0 512c0 170.662 345.6 512 768 512s768-384 768-512S1190.4 0 768 0z m0 938.663C392.5 938.663 85.337 597.337 85.337 512S392.5 85.337 768 85.337 1450.663 426.662 1450.663 512 1143.462 938.663 768 938.663z"
                                p-id="5451"></path>
                            <path
                                d="M768 789.337A277.337 277.337 0 1 1 1045.338 512 276.788 276.788 0 0 1 768 789.337zM768 320a192 192 0 1 0 192 192 191.25 191.25 0 0 0-192-192z"
                                p-id="5452"></path>
                        </svg>
                    </div>
                    <div class="stat-text">
                        <div class="stat-title">总访问量</div>
                        <div class="stat-value">{{stats.visits}}次</div>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon" style="background-color: #17A2B8;">
                        <svg t="1738721616999" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5311" width="40" height="40">
                            <path
                                d="M739.755 574.08c-121.387 45.61-208.47 169.813-208.64 316.16 0 33.408 4.693 65.493 13.141 95.915H94.123c-26.454-43.52-41.686-91.947-41.686-143.19 0-185.173 192.896-335.104 430.806-335.104 96.256 0 184.832 24.747 256.512 66.219zM459.264 459.093a214.87 214.87 0 0 1-214.87-215.04 215.04 215.04 0 0 1 214.87-215.21 215.04 215.04 0 0 1 215.04 215.21 215.04 215.04 0 0 1-215.04 215.04zM974.507 641.28c9.856 0 17.834 7.467 17.834 16.64v59.99c-0.341 8.789-7.85 15.786-17.28 16.085-9.856 0.341-18.176-6.827-18.517-16.086v-20.053l-99.115 91.093-0.256 0.256a18.475 18.475 0 0 1-14.848 4.352h-0.768a18.176 18.176 0 0 1-9.344-4.608l-0.938-0.981-85.931-80.043-123.563 115.072a18.773 18.773 0 0 1-25.216 0 15.787 15.787 0 0 1 0-23.466l136.15-126.848 0.725-0.598a18.645 18.645 0 0 1 24.363 0.512l87.253 81.238 86.059-79.232h-21.248c-9.387-0.299-16.939-7.339-17.28-16.086-0.342-9.173 7.381-16.896 17.28-17.237h64.64z m-367.147 240h48.128c8.875 0 16.043 7.168 16.043 16.043v72.192a16.043 16.043 0 0 1-16.043 16.042H607.36a16.043 16.043 0 0 1-16.043-16.042v-72.192c0-8.875 7.211-16.043 16.043-16.043z m110.805-106.667h48.128c8.875 0 16.043 7.168 16.043 16.043v178.859a16.043 16.043 0 0 1-16.043 16.042h-48.128a16.043 16.043 0 0 1-16.042-16.042V790.656c0-8.875 7.168-16.043 16.042-16.043z m106.539 80h48.128c8.875 0 16.043 7.168 16.043 16.043v99.413a16.043 16.043 0 0 1-16.043 16.043h-48.085a16.043 16.043 0 0 1-16.043-16.043v-99.413c0-8.875 7.168-16.043 16.043-16.043z m110.165-80h48.128c8.875 0 16.043 7.168 16.043 16.043v179.413a16.043 16.043 0 0 1-16.043 16.043H934.87a16.043 16.043 0 0 1-16.042-16.043V790.656c0-8.875 7.21-16.043 16.042-16.043z"
                                p-id="5312"></path>
                        </svg>
                    </div>
                    <div class="stat-text">
                        <div class="stat-title">总访客数</div>
                        <div class="stat-value">{{stats.visitors}}人</div>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon" style="background-color: #DC3545;">
                        <svg t="1738721743588" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6506" width="40" height="40">
                            <path
                                d="M512 65.290005C265.687128 65.290005 65.291029 265.686105 65.291029 511.998977S265.687128 958.707948 512 958.707948 958.708971 758.312872 958.708971 512 758.312872 65.290005 512 65.290005z m0 842.367243c-218.169905 0-395.657248-177.487344-395.657248-395.657248S293.830095 116.342752 512 116.342752s395.657248 177.487344 395.657248 395.657248-177.487344 395.657248-395.657248 395.657248z"
                                p-id="6507"></path>
                            <path
                                d="M505.942027 258.120802c-14.109346 0-25.526373 11.429307-25.526373 25.526373v453.091332c0 14.097066 11.417027 25.526373 25.526373 25.526373s25.526373-11.429307 25.526373-25.526373V283.647175c0-14.097066-11.417027-25.526373-25.526373-25.526373zM703.770651 462.330764c-14.109346 0-25.526373 11.429307-25.526373 25.526373v248.88137c0 14.097066 11.417027 25.526373 25.526373 25.526373s25.526373-11.429307 25.526374-25.526373V487.857137c0-14.097066-11.417027-25.526373-25.526374-25.526373zM308.113403 538.909883c-14.109346 0-25.526373 11.429307-25.526373 25.526373v172.302251c0 14.097066 11.417027 25.526373 25.526373 25.526373s25.526373-11.429307 25.526373-25.526373V564.436256c0-14.097066-11.417027-25.526373-25.526373-25.526373z"
                                p-id="6508"></path>
                        </svg>
                    </div>
                    <div class="stat-text">
                        <div class="stat-title">平台接口</div>
                        <div class="stat-value">3个</div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 动态内容区域 -->
        <main class="content-area">
            <!-- 功能展示 -->
            <section v-if="activeTab === 'demo'" class="function-section">
                <h2>功能展示</h2>
                <div class="demo-container">
                    <div class="input-area">
                        <div class="carousel-wrapper">
                            <div class="carousel-container">
                                <!-- 新增左右导航按钮 -->
                                <button class="carousel-arrow left" @click="prevImage">
                                </button>
                                <button class="carousel-arrow right" @click="nextImage">
                                </button>

                                <!-- 原有处理按钮 -->
                                <button class="process-btn" @click="processCurrentImage" :disabled="isProcessing">
                                    {{ isProcessing ? '处理中...' : '效果演示' }}
                                </button>

                                <!-- 原有轮播轨道 -->
                                <div class="carousel-track"
                                    :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
                                    <div v-for="(img, index) in images" :key="index" class="carousel-item">
                                        <img :src="img" alt="算法效果展示">
                                    </div>
                                </div>

                                <!-- 原有导航点 -->
                                <div class="carousel-dots">
                                    <span v-for="(dot, index) in images" :key="index"
                                        :class="{ active: currentIndex === index }"
                                        @click="currentIndex = index"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="result-preview">
                        <img :src="processedImage" v-if="processedImage">
                    </div>
                </div>
            </section>

            <!-- API文档 -->
            <section v-if="activeTab === 'api'" class="api-docs">
                <div class="endpoint">
                    <h2>API接口文档</h2>
                    <h3 class='codeshow'>1.Vue.js 代码示例</h3>
                    <pre><code class="language-javascript">
// 1.声明 proprocessCurrentImage()
async processCurrentImage() { 
    // 获取上传的多张图片
    currentImage = this.images[this.currentIndex]; 

    // 创建FormData对象
    const formData = new FormData();

    // 将上传的多张图片添加到表单中
    formData.append('index', this.getIndex(currentImage.split('/')[2]) + '');

    // 发送POST请求
    const response = await fetch('http://localhost:5000/superResolution', {
    method: 'POST',
    body: formData
    });

    // 对 POST 请求失败之后的处理
    if (!response.ok) throw new Error(`处理失败: ${response.statusText}`);

    // 请求成功, 获取 JSON 中的数据
    const result = await response.json();

    // 拿去 JSON 中图片的 url 地址
    const imgResponse = await fetch(result.imageUrl)

    // 验证 url 地址没有错误
    if (imgResponse.ok) {
    // 加载 url 中的图片
    const imgBlob = await imgResponse.blob();
    const imgUrl = URL.createObjectURL(imgBlob);
    // 显示高分重建之后的图片
    this.processedImage = imgUrl
    }

    // 添加处理记录到历史
    this.history.unshift({
    time: new Date().toLocaleString('zh-CN'),
    caller: this.username,
    status: 'success',
    result: this.processedImage || 'N/A'
    });
}
<br>
<br>
</code>
<code class="language-html">
&lt;!-- 2. 将 proprocessCurrentImage 方法与前端组见绑定(以 button 为例)--&gt;
&lt;button class="process-btn" @click="processCurrentImage" :disabled="isProcessing"&gt;
    &#123;&#123; isProcessing ? '处理中...' : '效果演示' &#125;&#125;
&lt;/button&gt;
</code>
</pre>


                    <h3>2.请求地址</h3>
                    <code>http://localhost:5000/superResolution</code>
                    <h3>3.请求说明</h3>
                    <h4>3.1 请求类型</h4>
                    <code>POST </code>
                    <h4>3.2请求格式</h4>
                    <pre>{
    "method": "POST",
    "code": "formData"
}</pre>
                    <h4>3.3请求参数</h4>
                    <p>formData 表单参数</p>
                    <table>
                        <tr>
                            <th>参数</th>
                            <th>类型</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>imageList[img1, img2, img3, ...]</td>
                            <td>Json</td>
                            <td>输入多张图像文件</td>
                        </tr>
                        <tr>
                            <td>scale</td>
                            <td>Number</td>
                            <td>重建倍率（2-4）</td>
                        </tr>
                    </table>
                    <h3>4.返回参数</h3>
                    <h4>4.1 返回参数类型</h4>
                    <code>JSON</code>

                    <h4>4.2请求成功返回的JSON格式:</h4>
                    <pre>{
    "imgurl": "http://localhost:5000/app/rets/x.png",
    "code": "200"
}</pre>
                    <br>
                    <h4>4.3请求失败返回的JSON格式:</h4>
                    <pre>{
    'imgurl':null
    "code": 根据不同的错误返回相应的状态码
}</pre>

                    <h3>5.响应示例</h3>
                    <p>高分辨率重建成功之后, 后端给出的记录响应</p>
                    <pre>{
    "time": "2025-02-01 09:10:10"
    "caller": "admin"
    "status": "success",
    "input": "input1.png",
    "result": "ret1.png"
}</pre>
                </div>
            </section>

            <!-- 历史记录 -->
            <section v-if="activeTab === 'history'" class="history-section">
                <h2>处理历史
                    <span class="refresh-btn" @click="fetchDailyData">
                        {{ isDailyLoading ? '加载中...' : '刷新' }}
                    </span>
                </h2>
                <div v-if="dailyError" class="error-message">
                    {{ dailyError }}
                </div>
                <div class="history-list">
                    <div v-for="(record, index) in history" :key="index" class="record-item"
                        :class="{ 'new-item': index < dailyNewCount }">
                        <span class="time">{{ record.time }}</span>
                        <span class="caller">{{ record.caller }}</span>
                        <span class="status" :class="record.status">
                            {{ getStatusText(record.status) }}
                        </span>
                        <button @click="viewDetail(record)">查看详情</button>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="../scripts/model.js"></script>
</body>

</html>